<template>
  <view class="container">
    <view class="grid">
      <view v-for="(item, idx) in types" :key="idx" class="grid-item" :class="{ active: form.type === item.value }" @click="selectType(item.value)">
        <view class="icon">{{ item.icon }}</view>
        <text class="label">{{ item.label }}</text>
      </view>
    </view>

    <Card class="section">
      <text class="section-title">我要反馈</text>
      <textarea class="textarea" v-model="form.content" placeholder="你想说点什么？" />
      <view class="uploader">
        <view class="upload-slot" @click="chooseImage">
          <text class="plus">＋</text>
        </view>
        <view class="thumb" v-for="(img, i) in form.images" :key="i">
          <image :src="img" mode="aspectFill" />
          <view class="remove" @click.stop="removeImage(i)">×</view>
        </view>
      </view>
    </Card>

    <Card class="section">
      <text class="section-title">联系方式 <text class="hint">（手机号/微信/QQ）</text></text>
      <input class="input" v-model="form.contact" placeholder="请留下任意一个联系方式" />
    </Card>

    <view class="actions">
      <Button type="primary" text="提交" @click="handleSubmit" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      types: [
        { label: '页面闪退', value: 'crash', icon: '⚡' },
        { label: '传输问题', value: 'upload', icon: '⬆️' },
        { label: '操作体验', value: 'ux', icon: '🖱️' },
        { label: '界面审美', value: 'ui', icon: '🎨' },
        { label: '功能建议', value: 'suggest', icon: '💡' },
        { label: '其他反馈', value: 'other', icon: '📝' }
      ],
      form: {
        type: 'upload',
        content: '',
        images: [],
        contact: ''
      }
    };
  },
  methods: {
    selectType(t) {
      this.form.type = t;
    },
    chooseImage() {
      uni.chooseImage({
        count: 6 - this.form.images.length,
        success: (res) => {
          const files = res.tempFilePaths || [];
          this.form.images = this.form.images.concat(files).slice(0, 6);
        }
      });
    },
    removeImage(i) {
      this.form.images.splice(i, 1);
    },
    handleSubmit() {
      if (!this.form.content.trim()) {
        uni.showToast({ title: '请填写反馈内容', icon: 'none' });
        return;
      }
      if (!this.form.contact.trim()) {
        uni.showToast({ title: '请留下联系方式', icon: 'none' });
        return;
      }
      // TODO: 可对接后端反馈接口
      uni.showToast({ title: '提交成功', icon: 'success' });
      setTimeout(() => uni.navigateBack(), 1200);
    }
  }
};
</script>

<style lang="scss" scoped>
.container { padding: $spacing-base; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: $spacing-base; margin-bottom: $spacing-base; }
.grid-item { background: #fff; border-radius: $border-radius-base; padding: $spacing-base; text-align: center; border: 1rpx solid $border-color; }
.grid-item.active { border-color: $primary-color; box-shadow: 0 0 0 2rpx rgba($primary-color, .15); }
.grid-item .icon { font-size: 40rpx; margin-bottom: 8rpx; }
.grid-item .label { font-size: $font-size-sm; color: $text-primary; }

.section { margin-bottom: $spacing-base; }
.section-title { display: block; font-weight: bold; color: $text-primary; margin-bottom: $spacing-sm; }
.hint { color: $text-tertiary; font-weight: normal; font-size: $font-size-sm; }

.textarea { width: 100%; min-height: 200rpx; border: 1rpx solid $border-color; border-radius: $border-radius-base; padding: $spacing-base; box-sizing: border-box; background: #fff; }
.uploader { display: flex; flex-wrap: wrap; gap: $spacing-sm; margin-top: $spacing-sm; }
.upload-slot { width: 140rpx; height: 140rpx; border: 1rpx dashed $border-color; border-radius: $border-radius-base; display: flex; align-items: center; justify-content: center; background: #fff; }
.plus { color: $text-tertiary; font-size: 48rpx; }
.thumb { width: 140rpx; height: 140rpx; border-radius: $border-radius-base; position: relative; overflow: hidden; }
.thumb image { width: 100%; height: 100%; }
.remove { position: absolute; top: 0; right: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 28rpx; padding: 2rpx 8rpx; border-bottom-left-radius: $border-radius-base; }

.input { width: 100%; height: 80rpx; border: 1rpx solid $border-color; border-radius: $border-radius-base; padding: 0 $spacing-base; background: #fff; box-sizing: border-box; }

.actions { margin-top: $spacing-lg; }
</style>


